<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>

  <div class="box box1 box2" title="这是title" abc="这是abc"
    data-abc="这是html5新增的自定义属性规范：abc"
    data-haha="这是html5新增的自定义属性规范：haha"
  >
    这是一个box
  </div>
  
</body>
<script>

  var box = document.querySelector(".box");

  console.log( box );

  // html的内置属性：对象的操作语法
  // console.log( box.title );
  // html的内置属性：元素.get/set/removeAttribute方法
  // 获取
  // console.log( box.getAttribute("title") )
  // 设置
  // box.setAttribute("title", "hahahaha ")
  // box.setAttribute("id", "cont")
  // 删除
  // box.removeAttribute("title")
  // box.removeAttribute("id")


  // html的自定义属性：不能使用对象语法
  // console.log( box.abc );
  // html的自定义属性：元素.get/set/removeAttribute方法
  // 获取
  // console.log( box.getAttribute("abc") );
  // 设置
  // box.setAttribute("qwe", "哈哈哈");
  // box.setAttribute("abc", "heiheihei");
  // 删除
  // box.removeAttribute("abc");
  // box.removeAttribute("qwe");


  // console.log( box.class )
  // console.log( box.className )
  // console.log( box.getAttribute("class") );

  // box.className = box.className.replace("box", "abc");
  // box.className += " abc"

  // console.log(box.classList)
  // box.classList.add("abc")


  // console.log("==========")

  // js属性：没有写在html标签内

  // js内置属性：对象语法
  // console.log( box.nodeType )
  // console.log( box.tagName )
  // console.log( box.innerHTML )
  // js自定义属性：对象语法
  // box.hahaha = "hello world";
  // console.log( box.hahaha )

  // console.log("==========")

  // js属性：dataset
  // console.log(box.dataset);
  // console.log(box.dataset.abc);
  // console.log(box.dataset.haha);
  // box.dataset.xxx = "嘿嘿嘿"

  // html5新增的规范：
    // 标签上的属性书写：data-xxx=""
    // DOM对象中新增的属性：元素.dataset.xxx

</script>
</html>